<template>
   <el-dialog
    v-model="dialogVisible"
    title="编辑"
    :before-close="CloseDia"
    width="60%">
    <div class="patient-container">
      <el-form class="patient-form" :model="patient" ref="patientRef" label-width="120px" :rules="patientRules" label-position="top">
        <el-form-item label="id" v-if="false" prop="id">
          <el-input v-model="patient.id" name="id" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="patient.type" placeholder="" name="type" >
            <el-option value="1" label="门诊" selected/>
            <el-option value="2" label="住院" />
          </el-select>
        </el-form-item>
        <el-form-item label="登记号" prop="regNum">
          <el-input v-model="patient.regNum" name="regNum" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="patient.name" name="name" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="patient.sex" placeholder="" name="sex">
            <el-option value="1" label="男" />
            <el-option value="2" label="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="patient.phone" name="phone"/>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
          <el-col :span="12">
            <el-form-item prop="birthday">
              <el-date-picker
                v-model="patient.birthday"
                type="date"
                placeholder=""
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="身份证号" prop="idNo">
          <el-input v-model="patient.idNo"  name="idNo"/>
        </el-form-item>
        <el-form-item label="身高" prop="height">
          <el-input v-model="patient.height"  name="height">
            <template #append>cm</template>
          </el-input>
        </el-form-item>
        <el-form-item label="体重" prop="weight">
          <el-input v-model="patient.weight"  name="weight">
            <template #append>kg</template>
          </el-input>
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input type="textarea" v-model="patient.memo"  name="memo"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed, onActivated, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { add, modify, getById } from '@/api/common/common'

const dialogVisible = computed(() => props.isShow)

const currentId = computed(() => props.id)

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false
  },
  id: {
    type: Number,
    default: null
  }
})

const patient = ref({})
// 根据id获取数据
const selectFormStore = id => {
  getById(id, 'grk/patient').then(res => {
    console.log(res)
    patient.value = res
  })
}

const emits = defineEmits(['onCancel', 'click'])

const onCancel = () => {
  emits('diaCancel', false)
}

watch(() => {
  console.log(currentId.value)
  if (currentId.value) {
    selectFormStore(currentId.value)
  } else {
    patient.value = {}
  }
})

const id = ref(null)

const patientRef = ref(patient.value)

const patientRules = ref({
  regNum: [
    {
      required: true,
      trigger: 'blur',
      message: '登记号不能为空'
    }
  ],
  name: [
    {
      required: true,
      trigger: 'blur',
      message: '姓名不能为空'
    }
  ],
  sex: [
    {
      required: true,
      trigger: 'blur',
      message: '性别不能为空'
    }
  ],
  phone: [
    {
      required: true,
      trigger: 'blur',
      message: '手机号码不能为空'
    }
  ],
  birthday: [
    {
      type: 'date',
      required: true,
      trigger: 'change',
      message: '出生日期不能为空'
    }
  ]
})
const onSubmit = () => {
  console.log(patient.value.birthday)
  // patient.value.birthday = patient.value.birthday.substr(0, 10)
  if (id.value) { // 判断id是否为空
    patient.value.id = id.value
    modify(patient.value, id.value, 'grk/patient').then(res => {
      // 关闭该页面
      ElMessage.success('更新成功')
      emits('diaCancel', false)
      patient.value = {}
    })
  } else {
    console.log(patient)
    add(patient.value, 'grk/patient').then(res => {
      ElMessage.success('新增成功')
      emits('diaCancel', false)
      patient.value = {}
    })
  }
}

const CloseDia = () => {
  emits('diaCancel', false)
}

//  const onCancel = () => {
//  emits(props.isShow, false)
//  }
</script>

<style lang="scss" scoped>
.job-container {
  min-height: 100%;
  width: 100%;
  .job-form {
    position: relative;
    width: 90%;
    max-width: 100%;
    top: 50px;
    left: 40px;
  }
}
</style>
